<template>
  <div class="home-container">
    <!-- 原有的首页内容 -->
    <div class="advanced-home-content">
      <!-- 左侧：竖向文字展示 -->
      <div class="text-panel">
        <div class="vertical-text">
          <h1 class="main-title">探索世界之美</h1>
          <p class="subtitle">每一次旅行都是独一无二的故事</p>
        </div>
      </div>

      <!-- 中间：动态漂浮景点卡片 -->
      <div class="floating-gallery">
        <div 
          v-for="(attraction, index) in attractions" 
          :key="attraction.id"
          ref="cardRefs"
          class="floating-card"
          :class="{ 
            'active': activeCard === attraction.id,
            'hovering': hoveringCard === attraction.id
          }"
          :style="getCardStyle(attraction)"
          @mouseenter="handleCardHover(attraction.id)"
          @mouseleave="handleCardLeave"
          @click="selectAttraction(attraction)"
        >
          <div class="card-image">
            <img :src="attraction.image" :alt="attraction.name" class="card-img">
            <div class="card-overlay"></div>
          </div>
          <div class="card-content">
            <h3 class="card-title">{{ attraction.name }}</h3>
            <p class="card-brief">{{ attraction.brief }}</p>
          </div>
          <div class="card-glow"></div>
        </div>
      </div>

      <!-- 右侧：详情展示 -->
      <div class="detail-panel">
        <div v-if="selectedAttraction" class="attraction-detail">
          <div class="detail-header">
            <h2 class="detail-title">{{ selectedAttraction.name }}</h2>
            <div class="detail-rating">
              <span class="stars">★★★★★</span>
              <span class="rating">9.2</span>
            </div>
          </div>
          
          <p class="detail-description">{{ selectedAttraction.description }}</p>
          
          <div class="detail-features">
            <div class="feature-item">
              <span class="feature-icon">🌡️</span>
              <span class="feature-text">{{ selectedAttraction.bestSeason }}</span>
            </div>
            <div class="feature-item">
              <span class="feature-icon">⏱️</span>
              <span class="feature-text">{{ selectedAttraction.duration }}</span>
            </div>
            <div class="feature-item">
              <span class="feature-icon">⭐</span>
              <span class="feature-text">{{ selectedAttraction.activities }}</span>
            </div>
          </div>
          
          <button class="explore-btn">
            <span class="btn-text">探索详情</span>
            <span class="btn-arrow">→</span>
          </button>
        </div>
        
        <div v-else class="placeholder-content">
          <div class="placeholder-animation">
            <div class="compass-icon">🧭</div>
            <div class="pulse-ring"></div>
          </div>
          <h3 class="placeholder-title">选择目的地</h3>
          <p class="placeholder-text">点击左侧景点卡片开启旅程</p>
        </div>
      </div>
    </div>

    <Footer/>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import Footer from '../components/layout/Footer.vue'; // 确保导入路径正确

// 景点数据
const attractions = ref([
  {
    id: 1,
    name: '挪威极光奇迹',
    brief: '追逐夜空中舞动的绿色丝带',
    description: '在特罗姆瑟的北极圈内，体验极光在夜空中舞动的神奇景象。最佳观测时间为9月至次年3月，搭配雪地活动让旅程更加完美。',
    bestSeason: '9月-3月',
    duration: '5-7天旅程',
    activities: '极光观测、雪地摩托',
    image: 'https://images.unsplash.com/photo-1531366936337-7c912a4589a7?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
    initialPosition: { x: 15, y: 10 },
    rotation: -3
  },
  {
    id: 2,
    name: '日本樱花季',
    brief: '漫步在粉色的樱花隧道中',
    description: '京都的哲学之道在樱花季节变成了一条粉色的隧道，搭配传统和服体验，感受日本文化的独特魅力。',
    bestSeason: '3月-4月',
    duration: '6-8天旅程',
    activities: '赏樱、茶道体验',
    image: 'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
    initialPosition: { x: 65, y: 25 },
    rotation: 2
  },
  {
    id: 3,
    name: '马尔代夫蓝海',
    brief: '在纯净海水中与热带鱼共游',
    description: '马尔代夫的珊瑚礁生态系统丰富多样，是浮潜和潜水的绝佳地点。清澈见底的海水让你仿佛置身于蓝色天堂。',
    bestSeason: '11月-4月',
    duration: '4-6天旅程',
    activities: '浮潜、沙滩休闲',
    image: 'https://images.unsplash.com/photo-1573843981267-be1999ff37cd?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
    initialPosition: { x: 10, y: 60 },
    rotation: -1
  },
  {
    id: 4,
    name: '瑞士阿尔卑斯',
    brief: '雄伟的山脉、清澈的湖泊',
    description: '瑞士阿尔卑斯山脉提供世界级的登山和徒步体验，夏季可欣赏野花盛开的草地，冬季则是滑雪爱好者的天堂。',
    bestSeason: '6月-9月',
    duration: '7-10天旅程',
    activities: '登山、徒步',
    image: 'https://images.unsplash.com/photo-1464822759844-d150baec2d6a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
    initialPosition: { x: 70, y: 55 },
    rotation: 4
  }
]);

// 响应式数据
const activeCard = ref(null);
const hoveringCard = ref(null);
const selectedAttraction = ref(null);
const cardRefs = ref([]);

// 粒子系统状态
const particleStates = ref(attractions.value.map(() => ({
  x: 0,
  y: 0,
  vx: 0,
  vy: 0,
  rotation: 0
})));

// 获取卡片样式
const getCardStyle = (attraction) => {
  const index = attractions.value.findIndex(a => a.id === attraction.id);
  const particle = particleStates.value[index];
  
  return {
    '--rotate': `${attraction.rotation + particle.rotation}deg`,
    '--translate-x': `${particle.x}px`,
    '--translate-y': `${particle.y}px`,
    left: `${attraction.initialPosition.x}%`,
    top: `${attraction.initialPosition.y}%`
  };
};

// 卡片交互处理
const handleCardHover = (cardId) => {
  hoveringCard.value = cardId;
  triggerAvoidance(cardId);
};

const handleCardLeave = () => {
  hoveringCard.value = null;
};

const selectAttraction = (attraction) => {
  selectedAttraction.value = attraction;
  activeCard.value = attraction.id;
};

// 粒子系统动画
let animationFrame;
const startParticleAnimation = () => {
  const animate = () => {
    particleStates.value.forEach((particle, index) => {
      if (Math.random() < 0.02) {
        particle.vx = (Math.random() - 0.5) * 0.3;
        particle.vy = (Math.random() - 0.5) * 0.3;
        particle.rotation = (Math.random() - 0.5) * 1;
      }
      
      particle.x += particle.vx;
      particle.y += particle.vy;
      particle.vx *= 0.95;
      particle.vy *= 0.95;
      particle.rotation *= 0.9;
      
      if (Math.abs(particle.x) > 20) particle.vx = -particle.vx * 0.5;
      if (Math.abs(particle.y) > 15) particle.vy = -particle.vy * 0.5;
    });
    
    animationFrame = requestAnimationFrame(animate);
  };
  animate();
};

// 避让机制
const triggerAvoidance = (hoveredCardId) => {
  const hoveredIndex = attractions.value.findIndex(a => a.id === hoveredCardId);
  
  particleStates.value.forEach((particle, index) => {
    if (index !== hoveredIndex) {
      particle.vx += (Math.random() - 0.5) * 0.5;
      particle.vy += (Math.random() - 0.5) * 0.5;
    }
  });
};

onMounted(() => {
  nextTick(() => {
    startParticleAnimation();
  });
});

onUnmounted(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame);
  }
});
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.advanced-home-content {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  min-height: 700px; /* 改为最小高度，避免固定高度导致内容溢出 */
  width: 100%;
  max-width: 1400px; /* 使用最大宽度限制 */
  margin: 2rem auto;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  flex: 1; /* 确保内容区域占据剩余空间 */
}

/* 其他样式保持不变... */
.text-panel {
  background: rgba(255, 255, 255, 0.95);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(10px);
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
}

.main-title {
  font-size: 3rem;
  font-weight: 800;
  color: #2c3e50;
  margin-bottom: 1rem;
  line-height: 1.1;
  letter-spacing: 2px;
}

.subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
  margin-top: 2rem;
  font-weight: 300;
  letter-spacing: 1px;
}

.floating-gallery {
  position: relative;
  background: rgba(255, 255, 255, 0.98);
  overflow: hidden;
}

.floating-card {
  position: absolute;
  width: 260px;
  height: 320px;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: 
    rotate(var(--rotate, 0deg))
    translateX(var(--translate-x, 0))
    translateY(var(--translate-y, 0));
}

.floating-card:hover {
  transform: 
    rotate(0deg)
    translateX(var(--translate-x, 0))
    translateY(calc(var(--translate-y, 0) - 15px))
    scale(1.05);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 60px rgba(74, 144, 226, 0.4);
  z-index: 20;
}

.floating-card.hovering {
  transform: 
    rotate(var(--rotate, 0deg))
    translateX(var(--translate-x, 0))
    translateY(calc(var(--translate-y, 0) - 5px))
    scale(1.02);
}

.card-image {
  width: 100%;
  height: 65%;
  position: relative;
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.floating-card:hover .card-img {
  transform: scale(1.1);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.floating-card:hover .card-overlay {
  opacity: 1;
}

.card-content {
  padding: 1.5rem;
  height: 35%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
}

.card-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.card-brief {
  font-size: 0.95rem;
  color: #7f8c8d;
  line-height: 1.4;
}

.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(45deg, transparent, rgba(74, 144, 226, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.floating-card:hover .card-glow {
  opacity: 1;
}

.detail-panel {
  background: rgba(255, 255, 255, 0.95);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.attraction-detail {
  width: 100%;
  max-width: 320px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.detail-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
}

.detail-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stars {
  color: #ffb400;
  font-size: 1.1rem;
}

.rating {
  background: #2c5aa0;
  color: white;
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
}

.detail-description {
  color: #5a6c7d;
  line-height: 1.7;
  margin-bottom: 2rem;
  font-size: 1.05rem;
}

.detail-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem;
  background: rgba(44, 90, 160, 0.05);
  border-radius: 10px;
}

.feature-icon {
  font-size: 1.2rem;
}

.feature-text {
  color: #2c3e50;
  font-weight: 500;
}

.explore-btn {
  width: 100%;
  padding: 1.2rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
}

.explore-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5);
}

.btn-arrow {
  font-size: 1.3rem;
  transition: transform 0.3s ease;
}

.explore-btn:hover .btn-arrow {
  transform: translateX(3px);
}

.placeholder-content {
  text-align: center;
  color: #a0aec0;
}

.placeholder-animation {
  position: relative;
  margin-bottom: 2rem;
}

.compass-icon {
  font-size: 4rem;
  position: relative;
  z-index: 2;
}

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border: 2px solid #667eea;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}

.placeholder-title {
  font-size: 1.5rem;
  color: #4a5568;
  margin-bottom: 0.8rem;
}

.placeholder-text {
  font-size: 1.05rem;
  line-height: 1.5;
}

/* 确保Footer正确显示的样式 */
:deep(.footer-container) {
  margin-top: auto;
}

/* 响应式调整 */
@media (max-width: 1400px) {
  .advanced-home-content {
    width: 95%;
  }
}

@media (max-width: 992px) {
  .advanced-home-content {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: 2rem;
  }
  
  .text-panel, .detail-panel {
    border: none;
    padding: 1.5rem;
  }
  
  .vertical-text {
    writing-mode: horizontal-tb;
  }
  
  .main-title {
    font-size: 2.5rem;
  }
}
</style>